<template>
  <div class="home">
<!--    <search-com :placeholderValue="undefined"></search-com>-->
    <div class="guessCity">
      <span class="title">当前定位</span>
      <div class="guessCity-container">
        <h3 class="city">
          <i class="el-icon-s-promotion"></i>
          <router-link :to="'/searchPosition/' + guessCityId">
          武汉市
          </router-link>
        </h3>
        <span class="reload" @click="reload">重新定位</span>
      </div>
    </div>
    <div class="hotCity">
      <span class="title">热门城市</span>
      <div class="hotCity-container">
        <router-link v-for="item in hotCity" :to="'/searchPosition/' + item.id" :key="item.id">
          <button class="city">
            {{item.name}}
          </button>
        </router-link>
      </div>
    </div>
    <ul class="infinite-list groupCity" v-infinite-scroll="load" style="overflow:auto">
      <li v-for="(value, key, index) in sortgroupcity" :key="key"  class="infinite-list-item">
        <span class="letter">{{value.key}}
          <span v-if="value.key === 'A'">（按字母排序）</span>
        </span>
        <ul class="groupCity-container" v-for="item in value.value" :key="item.id" @click="goToCity(item.id)">
          <li class="city">{{item.name}}</li>
        </ul>
      </li>
    </ul>
    <aside class="alphabet">
      <ul class="alphabet-list">
        <li class="alphabet-item">#</li>
        <li class="alphabet-item"  v-for="(value, key, index) in sortgroupcity" :key="key">
          {{ value.key }}
        </li>
      </ul>
    </aside>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {Icity} from "@/api/config/responseType";
import { AxiosResponse } from 'axios';
import {reqCity, reqGuessCity } from '@/api/city';

@Component({
  components: {
  }
})
export default class choiceCityCom extends Vue {
  private groupCity= {} as Icity[];
  private hotCity= {} as Icity[];
  private guessCityName= '' as string;
  private guessCityId= 0 as number;
  private listEndNumber = 1 as number
  beforeMount(){
    reqGuessCity({  type: 'guess' }).then((res:AxiosResponse)=> {
      this.guessCityName = res.data.name;
      this.guessCityId = res.data.id;
    })
    reqCity({  type: 'hot' }).then( (res:AxiosResponse) => {
      this.hotCity = res.data;
    })
    reqCity({  type: 'group' }).then((res:AxiosResponse) => {
      this.groupCity = res.data;
    })
  }
/**
  * @description: 列表排序算法
  * @return {}
  */
  private get sortgroupcity(){
    let groupcity = this.groupCity;
    let sortArray = [];
    for (let i = 65; i <= 90; i++) {
        // @ts-ignore
        if (groupcity[(String.fromCharCode(i))]) {
          let sortObj = {};
          // @ts-ignore
          Object.assign(sortObj,{key:String.fromCharCode(i),value:groupcity[String.fromCharCode(i)]})
          sortArray.push(sortObj)
        }
      }
    return sortArray.splice(0,this.listEndNumber)
  }
/**
 * @description: 点击图标刷新页面
 * @return {}
 */
  private reload(){
    window.location.reload();
  }
/**
 * @description: 用a代替router-link提高性能
 * @return {}
 */
  private goToCity(id:string){
    this.$router.push('/searchPosition/'+ id)
  }
/**
 * @description: 滑动加载
 * @return {}
 */
  private load () {
    this.listEndNumber *= 2
  }
}
</script>

<style lang="less" scoped>
.home {
  ul,ol,li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .router-link-active {
    text-decoration: none;
    color: black;
  }
  position: relative;
  font-size: medium;
  background-color: #f8f8f8;
  .guessCity {
    .title{
      color: #9e9e9e;
      font-size: 14px;
    }
    padding: 1vh ;
    background-color: #ffffff;
    .guessCity-container {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      .city {
        margin: 2vh;
        .el-icon-s-promotion {
          color: #49a2f8;
          margin-right: 6px;
        }
      }
      .reload {
        margin: 2vh;
        color: #49a2f8;
        right: 0;
      }
    }
  }
  .hotCity {
    margin-top: 2vh;
    .title{
      color: #9e9e9e;
      font-size: 14px;
    }
    padding: 14px ;
    background-color: #ffffff;
    .hotCity-container {
      max-width: 800px;
      margin: 0 auto;
      padding-top: 1vh;
      display: flex;
      flex-wrap: wrap;
      .city {
        border: none;
        border-radius: 6px;
        background-color: #f5f5f5;
        padding: 2.5vh 5vw;
        margin: 1vh 2vw;
      }
    }
  }
  .groupCity {
    .letter{
      color: #9e9e9e;
      font-size: 14px;
    }
    padding: 14px 14px 0 14px;
    background-color: #ffffff;
    .groupCity-container {
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      .city {
        list-style: none;
        border-bottom: 1px #f5f5f5 solid;
        padding: 1em 1em 1em 0.5em;
      }
    }
  }
  .alphabet {
    position: fixed;
    top: 25%;
    right: 0;
    z-index: 99;
    margin-right: 2px;
    .alphabet-list {
      text-align: center;
      vertical-align: center;
      padding: 0;
      .alphabet-item {
        font-size: small;
        list-style: none;
        &:hover {
          border-radius: 4px;
          background-color: #66b5f9;
        }
      }
    }
  }
}

</style>
